<div id="content">
  <div class="row">
    <sa-big-breadcrumbs [items]="['Forms', 'Bootstrap Editors']" icon="pencil-square-o" class="col-xs-12 col-sm-7 col-md-7 col-lg-4"></sa-big-breadcrumbs>
    <sa-stats></sa-stats>
  </div>


  <!-- widget grid -->

  <sa-widgets-grid>

    <!-- row -->

    <div class="row">

      <!-- NEW WIDGET START -->
      <article class="col-sm-12 col-md-12 col-lg-6">

        <!-- Widget ID (each widget will need unique ID)-->
        <sa-widget [colorbutton]="false" [editbutton]="false" [togglebutton]="false" [fullscreenbutton]="false" [sortable]="false" color="purple">
          <!-- widget options:
          usage: <sa-widget [editbutton]="false">

          [colorbutton]="false"
          [editbutton]="false"
          [togglebutton]="false"
          [deletebutton]="false"
          [fullscreenbutton]="false"
          [custombutton]="false"
          [collapsed]="true"
          [sortable]="false"

          -->
          <header>
            <span class="widget-icon"> <i class="fa fa-pencil"></i> </span>

            <h2>Markdown</h2>

          </header>

          <!-- widget div-->
          <div>
            <!-- widget content -->
            <div class="widget-body no-padding">

                <textarea markdownEditor class="custom-scroll" data-height="270">
### Hello there
How are you?

I have bellow task for you :

Select from this text...
Click the bold on THIS WORD and make THESE ONE italic
Link GOOGLE to google.com
Test to insert image (and try to tab after write the image description)
Test Preview
And ending here... Click "List"

Enjoy!
                </textarea>

            </div>
            <!-- end widget content -->

          </div>
          <!-- end widget div -->

        </sa-widget>
        <!-- end widget -->

        <!-- Widget ID (each widget will need unique ID)-->
        <sa-widget class="well" [colorbutton]="false" [editbutton]="false" [togglebutton]="false" [fullscreenbutton]="false" [sortable]="false">
          <!-- widget options:
          usage: <sa-widget [editbutton]="false">

          [colorbutton]="false"
          [editbutton]="false"
          [togglebutton]="false"
          [deletebutton]="false"
          [fullscreenbutton]="false"
          [custombutton]="false"
          [collapsed]="true"
          [sortable]="false"

          -->
          <header>
            <span class="widget-icon"> <i class="fa fa-pencil"></i> </span>

            <h2>Markdown API</h2>

          </header>

          <!-- widget div-->
          <div>
            <!-- widget content -->
            <div class="widget-body">

              <h3>Markdown API</h3>

              <table class="table table-bordered table-striped">
                <thead>
                <tr>
                  <th>Method Name</th>
                  <th>Description</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                  <td><code>
                    showEditor()</code></td>
                  <td>Toggle on the editor visibility</td>
                </tr>
                <tr>
                  <td><code>
                    showPreview()</code></td>
                  <td>Toggle on the preview visibility</td>
                </tr>
                <tr>
                  <td><code>
                    hidePreview()</code></td>
                  <td>Toggle off the editor visibility</td>
                </tr>
                <tr>
                  <td><code>
                    isDirty()</code></td>
                  <td>Check the editor content state, return true if the original content was changed</td>
                </tr>
                <tr>
                  <td><code>
                    getContent()</code></td>
                  <td>Get the editor content</td>
                </tr>
                <tr>
                  <td><code>
                    setContent(<em>string</em> content)</code></td>
                  <td>Set the editor content</td>
                </tr>
                <tr>
                  <td><code>
                    findSelection(<em>string</em> words)</code></td>
                  <td>Find some words/sentence within the editor and returned selection object(containing word
                    position and other useful information).
                  </td>
                </tr>
                <tr>
                  <td><code>
                    getSelection()</code></td>
                  <td>Get the current selected chunk of words within the editor.</td>
                </tr>
                <tr>
                  <td><code>
                    setSelection(<em>int</em> start, <em>int</em> end)</code></td>
                  <td>Tell the editor to select a span of words from <code>
                    start</code> to <code>
                    end</code>.
                  </td>
                </tr>
                <tr>
                  <td><code>
                    replaceSelection(<em>string</em> content)</code></td>
                  <td>Replace the current selected chunk of words within the editor with any content.</td>
                </tr>
                <tr>
                  <td><code>
                    getNextTab()</code></td>
                  <td>Get the next tab memory. Returned selection object(containing word position and other useful
                    information).
                  </td>
                </tr>
                <tr>
                  <td><code>
                    setNextTab(<em>int</em> start, <em>int</em> end)</code></td>
                  <td>Tell the editor to select a span of words from <code>
                    start</code> to <code>
                    end</code> at next <code>
                    tab</code> keypress event.
                  </td>
                </tr>
                <tr>
                  <td><code>
                    enableButtons(<em>string</em> name)</code></td>
                  <td>Enabled a button by <code>
                    name</code> that described in <code>
                    buttons</code> or <code>
                    additionalButtons</code> arrays. Passing <code>
                    all</code> will enabled all buttons.
                  </td>
                </tr>
                <tr>
                  <td><code>
                    disableButtons(<em>string</em> name)</code></td>
                  <td>Disabled a button by <code>
                    name</code> that described in <code>
                    buttons</code> or <code>
                    additionalButtons</code> arrays. Passing <code>
                    all</code> will disabled all buttons.
                  </td>
                </tr>
                </tbody>
              </table>

            </div>
            <!-- end widget content -->

          </div>
          <!-- end widget div -->

        </sa-widget>
        <!-- end widget -->

      </article>
      <!-- WIDGET END -->

      <!-- NEW WIDGET START -->
      <article class="col-sm-12 col-md-12 col-lg-6">

        <!-- Widget ID (each widget will need unique ID)-->
        <sa-widget [colorbutton]="false" [editbutton]="false" [togglebutton]="false" [fullscreenbutton]="false" [sortable]="false" color="blue">
          <!-- widget options:
          usage: <sa-widget [editbutton]="false">

          [colorbutton]="false"
          [editbutton]="false"
          [togglebutton]="false"
          [deletebutton]="false"
          [fullscreenbutton]="false"
          [custombutton]="false"
          [collapsed]="true"
          [sortable]="false"

          -->
          <header>
            <span class="widget-icon"> <i class="fa fa-pencil"></i> </span>

            <h2>Summernote (Lightweight)</h2>

          </header>

          <!-- widget div-->
          <div>


            <!-- widget content -->
            <div class="widget-body no-padding">

              <div class="summernote" [summernote]="{height: 180}">

              </div>

              <div class="widget-footer smart-form">

                <div class="btn-group">

                  <button class="btn btn-sm btn-primary" type="button">
                    <i class="fa fa-times"></i> Cancel
                  </button>

                </div>
                <div class="btn-group">

                  <button class="btn btn-sm btn-success" type="button">
                    <i class="fa fa-check"></i> Save
                  </button>

                </div>

                <label class="checkbox pull-left">
                  <input type="checkbox" checked="checked" name="autosave" id="autosave">
                  <i></i>Auto Save
                </label>

              </div>

            </div>
            <!-- end widget content -->

          </div>
          <!-- end widget div -->

        </sa-widget>
        <!-- end widget -->

        <!-- Widget ID (each widget will need unique ID)-->
        <sa-widget class="well">
          <!-- widget options:
          usage: <sa-widget [editbutton]="false">

          [colorbutton]="false"
          [editbutton]="false"
          [togglebutton]="false"
          [deletebutton]="false"
          [fullscreenbutton]="false"
          [custombutton]="false"
          [collapsed]="true"
          [sortable]="false"

          -->
          <header>
            <span class="widget-icon"> <i class="fa fa-pencil"></i> </span>

            <h2>Example </h2>

          </header>

          <!-- widget div-->
          <div>

            <!-- widget content -->
            <div class="widget-body">

              <h3>Summernote Example</h3>

              <p>
                <button class="btn btn-primary" summernoteAttach=".click2edit" type="button">
                  Edit
                </button>
                <button class="btn btn-primary" summernoteDetach=".click2edit" type="button">
                  Save
                </button>
              </p>
              <p></p>

              <div class="click2edit">
                To change this text with summernote, click `Edit` button
              </div>

              <h5>HTML:</h5>
              <pre><code class="xml">
&lt;p&gt;
  &lt;button class=&quot;btn btn-primary&quot; summernoteAttach=&quot;.click2edit&quot; type=&quot;button&quot;&gt;
  Edit
  &lt;/button&gt;
  &lt;button class=&quot;btn btn-primary&quot; summernoteDetach=&quot;.click2edit&quot; type=&quot;button&quot;&gt;
  Save
  &lt;/button&gt;
&lt;/p&gt;

&lt;div class=&quot;click2edit&quot;&gt;
To change this text with summernote, click `Edit` button
&lt;/div&gt;
                </code></pre>
              <h5>Script:</h5>
              <pre><code class="javascript">
                    //no scripts required
				</code></pre>


              <h5>Documentation:</h5>

              <p class="alert alert-info">
                Full API for Summernote.js, including keybored shortcuts, PHP Examples, Django installation, and
                Rails (gem) integration can be found <a href="http://hackerwins.github.io/summernote/features.html#api">here</a>
              </p>
            </div>
            <!-- end widget content -->


            <!-- end widget div -->
          </div>

        </sa-widget>
        <!-- end widget -->

      </article>
      <!-- WIDGET END -->

    </div>

    <!-- end row -->

  </sa-widgets-grid>

  <!-- end widget grid -->


</div>
